Working with Shorthand Properties

You want to use shorthand properties in style sheets.

Begin with a properly marked up section.

<h3>Shorthand Property</h3>
<p>Combine properties with shorthand and save time, typing, and a 
few bytes. Your style sheets will also be easier to read.</p>

Then use just one instance of font property
instead of three: font-style, font-size, and font-family:

 

h3 {
 font: italic 18pt verdana, arial, sans-serif;
}
p {
 border: 2pt solid black;
}

Discussion

Several CSS properties can be tossed in favor of shorthand properties.

The border property is a shorthand property, which combines three properties into one. The border property can cover the values from the following properties:

  • border-color

  • border-width

  • border-style

The font property is a shorthand property, which combines three properties into one. The font property can cover the values from the following properties:

  • font-style

  • font-size/line-height

  • font-family

  • font-weight

  • font-variant

Enter the values just as you would with any other property except for font-family and font-size/line height. With font-family, enter the fonts in the order you wish for them to have priority and use a comma between each.

If you use both font-size and line height, then separate their values with a forward slash:

h3 {
 font: italic 18pt/20pt verdana, arial, sans-serif
}

For a rundown on the shorthand properties available to web developers, see Table 1-4.

Table 1-4. Shorthand properties
Property Values Example 
                              
                              background

 
background-color
background-image
background-repeat
background-attachment
background-position

 
background: url(book.gif) #999 no-repeat top;


                              
                              border

                              border-left

                              border-right

                              border-top

                              border-bottom

 
border-width
border-style
border-color

 
border: thin solid #000;


                              
                              font

 
font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar

 
font: 14px italic Verdana, Arial, sans-serif;


                              
                              list-style

 
list-style-type
list-style-position
list-style-image


list-style: circle inside;


                              
                              margin 

margin-top
margin-right
margin-bottom
margin-left

 
margin: 5px 0px 5px 10px;
margin: 5px;


                              
                              padding

 
padding-top
padding-right
padding-bottom
padding-left

 
padding: 5px 10%;